<template>
  <div class="report-bg">
    <div class="report-main">
      <div
        class="report-content"
        :style="{ transform: `scale(${tableScale})`, transformOrigin: 'left top' }"
      >
        <div class="report-title">训练报告</div>
        <div class="block">
          <div class="block-title">个人信息</div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">姓名：</span><input class="input" value="刘江池" readonly /></div>
            <div class="info-item fix-width"><span class="label">年龄：</span><input class="input" value="10" readonly /></div>
          </div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">性别：</span><span class="radio checked">●</span>男 <span class="radio">○</span>女</div>
          </div>
          <div class="info-row">
            <div class="info-item id-row"><span class="label">编号：</span><input class="input id-input" value="c28cf21328804305b57cdfaa78465d63" readonly /></div>
          </div>
        </div>
        <div class="block">
          <div class="block-title">训练信息</div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">训练类型：</span>分类认知</div>
            <div class="info-item fix-width"><span class="label">训练时长：</span>01:00</div>
          </div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">训练强度：</span>极高</div>
            <div class="info-item fix-width"><span class="label">总题量：</span>19</div>
          </div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">正确数：</span>14</div>
            <div class="info-item fix-width"><span class="label">错误数：</span>5</div>
          </div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">提示数：</span>0</div>
            <div class="info-item fix-width"><span class="label">开始时间：</span>2025-04-30 15:25:21</div>
          </div>
          <div class="info-row">
            <div class="info-item fix-width"><span class="label">分数：</span>420</div>
            <div class="info-item fix-width"><span class="label">平均完成时间：</span>2.0秒</div>
          </div>
        </div>
        <div class="block" style="margin-top: 20px;">
          <div class="block-title">图表分析</div>
          <div class="chart-area">
            <div class="echart-box" ref="timeChartRef"></div>
            <div class="echart-box" ref="resultChartRef"></div>
          </div>
        </div>
        <div class="block">
					<button
					class="u-f-ac"
					style="margin-left: auto;background-color: #2a7ab0;color: #fff;height: 30px;margin-bottom: 10px;
					border-radius: 50px;" @click="setDefault">预设</button>
          <div class="info-row align-top">
            <div class="info-item opinion-box">
              <span class="label">意见：</span>
              <textarea class="opinion-input" rows="2" />
            </div>
           
          </div>
          <div class="info-item sign-box" style="margin-top: 30px;">
              <span class="label" style="margin-left: auto;">签名：</span>
              <input class="" type="text"  style="border: none;border-bottom: 1px solid #2176b8  !important;margin-right: 30px;"  />
            </div>
        </div>
      </div>
    </div>
    <div class="right-btns">
      <button class="right-btn" @click="savePdf">保存</button>
      <button class="right-btn" @click="printReport">打印</button>
      <button class="right-btn" @click="exitReport">退出</button>
    </div>
    <div class="zoom-float-bar">
      <span class="zoom-label">缩放：</span>
      <input type="range" min="0.5" max="2" step="0.01" v-model.number="tableScale" />
      <span class="zoom-value">{{ (tableScale * 100).toFixed(0) }}%</span>
    </div>
		<Dialog ref="orderRef">
      <div style="width: 50vw;">
        <div style="color: #000;font-size: 22px;margin-top: 20px;">评测预设</div>
        <div class="def">
          <div class="def-input-row u-f-ac">
            <div class="def-input-col ">
              <div class="def-input-label" style="text-align: left;">输入内容（最多160字）</div>
              <textarea class="def-input-textarea" v-model="inputValue" maxlength="160" />
            </div>
            <button class="def-add-btn" @click="addRow">
              <svg width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="14" fill="#2176b8"/><path d="M14 8v12M8 14h12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
            </button>
          </div>
          <table class="def-table">
            <thead>
              <tr >
                <th style="width: 80px;border-right: 1px solid #fff;text-align: center;border-radius: 20px 0px 0px 0;">序号</th>
                <th style="border-right: 1px solid #fff;text-align: center;">内容</th>
                <th style="width: 160px;text-align: center;border-radius: 0 20px 0px 0;">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, idx) in tableData" :key="row.id">
                <td class="def-td-serial">
                  <div style="width: 120px;text-align: center;">{{ idx + 1 }}</div>
                </td>
                <td class="def-td-content" @click="startEdit(idx)">
                  <div v-if="editingIndex !== idx">{{ row.advice }}</div>
                  <input v-else v-model="editingValue" class="edit-input" @blur="cancelEdit" />
                </td>
                <td class="def-td-actions">
                  <button @click="checkedRow(idx)" class="def-circle-btn checked" title="勾选">
										<i class="iconfont icon-duigou"></i>
                  </button>
                  <button @click="saveEdit(idx)" class="def-circle-btn edit" title="编辑">
										<i class="iconfont icon-xiugai"></i>
                  </button>
                  <button @click="deleteRow(idx)" class="def-circle-btn " title="删除">
										<i class="iconfont icon-shanchu"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </Dialog>
		<Message ref="messageRef" />
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Dialog from '../../components/Dialog.vue';
import Message from '../../components/Message.vue';
declare global {
  interface Window {
    electron?: {
      ipcRenderer?: {
        invoke: (channel: string, ...args: any[]) => Promise<any>
      }
    }
  }
}
const messageRef = ref<any>(null);
const orderRef = ref<any>(null);
const router = useRouter();
const timeChartRef = ref<HTMLDivElement | null>(null);
const resultChartRef = ref<HTMLDivElement | null>(null);
let timeChart: echarts.ECharts | null = null;
let resultChart: echarts.ECharts | null = null;

const timeData = [2.3, 3.6, 1.5, 1.2, 1.5, 1.2, 1.4, 1.1, 1.4, 1.7, 1.2, 2.3, 4.3, 1.7, 2.2, 3.6, 1.1, 1.7, 2.2];
const resultData = [14, 5, 0];

const tableScale = ref(1);
const exitReport = () => {
  router.back();
}
const setDefault = () => {
  orderRef.value.open();
}
const inputValue = ref('')
const tableData = ref<any[]>([])
const editingIndex = ref<number>(-1)
const editingValue = ref('')
const addRow = () => {
  if (!inputValue.value.trim()) { 
    messageRef.value.show('请输入内容','error')
    return
  } 
  window.request?.('/system/advice', { 
    method: 'POST',
    body: {
      advice: inputValue.value.trim(),
    }
  }).then(res => {
    if (res?.data) {
      tableData.value.push(res.data)
    }
    getAdviceList()

    inputValue.value = ''
  })
}
const deleteRow = (idx: number) => {
  const id = tableData.value[idx]?.id
  if (id) {
    window.request?.(`/system/advice/${id}`, { method: 'DELETE' }).then(() => {
      tableData.value.splice(idx, 1)
    })
    getAdviceList()

  }
}
const checkedRow = (idx: number) => {
  const val = tableData.value[idx]?.advice || ''
  const textarea = document.querySelector('.opinion-input') as HTMLTextAreaElement
  if (textarea) textarea.value = val
  orderRef.value.close()
}
const startEdit = (idx: number) => {
  editingIndex.value = idx
  editingValue.value = tableData.value[idx]?.advice || ''
}
const cancelEdit = () => {
  editingIndex.value = -1
}
const saveEdit = (idx: number) => {
  const id = tableData.value[idx]?.id
  if (id && editingValue.value.trim()) {
    window.request?.(`/system/advice`, { 
      method: 'PUT',
      body: {
        id,
        advice: editingValue.value.trim()
      }
    }).then(res => {
      getAdviceList()
      if (res?.data) {
        tableData.value[idx] = res.data
      }
    })
  }
  editingIndex.value = -1
}
const getAdviceList = () => {
  window.request?.('/system/advice/list', { method: 'GET' }).then(res => {
    console.log(res);
    
    tableData.value = Array.isArray(res?.rows) ? res.rows : []
  })
}
onMounted(() => {
  // 获取评测预设列表
  getAdviceList()
  if (timeChartRef.value) {
    timeChart = echarts.init(timeChartRef.value);
    timeChart.setOption({
      grid: { left: 40, right: 20, top: 30, bottom: 30 },
      xAxis: {
        type: 'category',
        data: timeData.map((_, i) => (i + 1).toString()),
        axisLine: { lineStyle: { color: '#2176b8' } },
        axisLabel: { color: '#2176b8', fontWeight: 500 },
      },
      yAxis: {
        type: 'value',
        name: '单位(秒)',
        nameTextStyle: { color: '#2176b8', fontWeight: 500, fontSize: 13 },
        axisLine: { lineStyle: { color: '#2176b8' } },
        axisLabel: { color: '#2176b8', fontWeight: 500 },
        splitLine: { lineStyle: { color: '#e0eaf3' } },
      },
      series: [{
        data: timeData,
        type: 'bar',
        itemStyle: {
          color: function(params: any) {
            return params.value >= 3 ? '#4caf50' : '#2176b8';
          },
          borderRadius: [6, 6, 0, 0],
        },
        barWidth: 18,
        label: {
          show: true,
          position: 'top',
          color: '#2176b8',
          fontSize: 13,
          fontWeight: 500,
        },
      }],
    });
  }
  if (resultChartRef.value) {
    resultChart = echarts.init(resultChartRef.value);
    resultChart.setOption({
      grid: { left: 40, right: 20, top: 30, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['正确', '错误', '提示'],
        axisLine: { lineStyle: { color: '#2176b8' } },
        axisLabel: { color: '#2176b8', fontWeight: 500 },
      },
      yAxis: {
        type: 'value',
        name: '单位(次)',
        nameTextStyle: { color: '#2176b8', fontWeight: 500, fontSize: 13 },
        axisLine: { lineStyle: { color: '#2176b8' } },
        axisLabel: { color: '#2176b8', fontWeight: 500 },
        splitLine: { lineStyle: { color: '#e0eaf3' } },
      },
      series: [{
        data: resultData,
        type: 'bar',
        itemStyle: {
          color: function(params: any) {
            return ['#2176b8', '#4caf50', '#bdbdbd'][params.dataIndex];
          },
          borderRadius: [6, 6, 0, 0],
        },
        barWidth: 32,
        label: {
          show: true,
          position: 'top',
          color: '#2176b8',
          fontSize: 13,
          fontWeight: 500,
        },
      }],
    });
  }
});
onBeforeUnmount(() => {
  timeChart && timeChart.dispose();
  resultChart && resultChart.dispose();
});

const savePdf = async () => {
  document.body.classList.add('pdf-exporting');
  await new Promise(r => setTimeout(r, 200));
  await window.electron?.ipcRenderer?.invoke('export-pdf');
  document.body.classList.remove('pdf-exporting');
	
};

const printReport = async () => {
  document.body.classList.add('pdf-exporting');
  await new Promise(r => setTimeout(r, 200));
  window.print();
  document.body.classList.remove('pdf-exporting');
};
</script>

<style>
body.pdf-exporting .right-btns,
body.pdf-exporting .zoom-float-bar,
body.pdf-exporting .report-bg::before,
body.pdf-exporting .report-bg::after {
  display: none !important;
}
body.pdf-exporting .report-bg {
  background: #fff !important;
}
body.pdf-exporting .report-main {
  box-shadow: none !important;
  margin: 0 auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
</style>

<style scoped>
.report-bg {
  width: 98vw;
  min-height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.report-main {
  width: 700px;
  background: #fff;
  margin: 32px 0 32px 0;
  border-radius: 10px;
  border: 1.5px solid #b5d2e8;
  box-sizing: border-box;
  padding: 0 0 24px 0;
  overflow: hidden;
}
.report-title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #2176b8;
  margin: 24px 0 10px 0;
  letter-spacing: 2px;
}
.block {
  margin: 0 32px 18px 32px;
  background: #fff;
  border-radius: 8px;
  /* border: 1.2px solid #b5d2e8; */
  box-sizing: border-box;
  padding-bottom: 8px;
}
.block-title {
  background: #2176b8;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  padding: 6px 18px;
  letter-spacing: 1px;
	text-align: left;
}
.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0;
  padding: 4px 18px 0 18px;
  text-align: left;
}
.info-item, .info-item.fix-width, .info-item.id-row {
  justify-content: flex-start;
  text-align: left;
}
.info-item.fix-width {
  width: 50%;
  min-width: 120px;
  max-width: 350px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1px;
  padding-right: 8px;
}
.info-item.id-row {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}
.input.id-input {
  width: 350px;
  max-width: 80%;
}
.label {
  color: #2176b8;
  font-weight: 500;
  margin-right: 2px;
}
.input {
  border: none;
  background: transparent;
  color: #222;
  font-size: 15px;
  outline: none;
  width: 60px;
}
.input.long {
  width: 260px;
}
.radio {
  font-size: 16px;
  color: #2176b8;
  margin: 0 2px;
}
.radio.checked {
  color: #2176b8;
}
.chart-area {
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.echart-box {
  width: 100%;
  height: 160px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0eaf3;
  margin-bottom: 0;
}
.align-top {
  align-items: flex-start;
}
.opinion-box {
  flex: 2;
  display: flex;
  align-items: flex-start;
}
.opinion-input {
  flex: 1;
	padding: 5px;
  border: 1.2px solid #b5d2e8;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  resize: none;
  background: #fafdff;
  margin-left: 4px;
  min-width: 220px;
  min-height: 48px;
}
.sign-box {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 18px;
}
.sign-input {
  flex: 1;
  border: 1.2px solid #b5d2e8;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 15px;
  background: #fafdff;
  margin-left: 4px;
  min-width: 80px;
}
.submit-btn {
  background: #2176b8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 28px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 18px;
  margin-top: 8px;
  transition: background 0.2s;
}
.submit-btn:hover {
  background: var(--theme-primary);
}
.right-btns {
  position: fixed;
  right: 48px;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 10;
}
.right-btn {
  width: 90px;
  height: 38px;
  background: #fff;
  color: #2176b8;
  border: 1.5px solid #b5d2e8;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30,94,146,0.08);
  transition: background 0.2s, color 0.2s;
}
.right-btn:hover {
  background: #2176b8;
  color: #fff;
}
.zoom-float-bar {
  position: fixed;
  right: 58px;
  bottom: 220px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(30,94,146,0.08);
  padding: 6px 18px;
  font-size: 14px;
}
.zoom-label, .zoom-value {
  color: #2176b8;
}
.table-container {
  transition: transform 0.2s;
  /* 这里放表格的样式 */
}
.report-content {
  width: 100%;
}
.input-area {
  margin-bottom: 12px;
}
.input-label {
  color: #222;
  font-size: 15px;
  margin-bottom: 6px;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.input-content {
  flex: 1;
  min-height: 48px;
  border: 1.5px solid #b5d2e8;
  border-radius: 10px;
  font-size: 16px;
  padding: 8px 12px;
  resize: none;
  background: #fff;
}
.add-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2176b8;
  color: #fff;
  font-size: 28px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.add-btn:hover {
  background: var(--theme-primary);
}
.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  font-size: 16px;
}
.custom-table th {
  background: #2176b8;
  color: #fff;
  font-weight: 500;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 0;
}
.custom-table th, .custom-table td {
  text-align: left;
  padding: 10px 12px;
}
.custom-table td {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #e0eaf3;
}
.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  margin-right: 8px;
  background: #eaf4fa;
  color: #2176b8;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.circle-btn:last-child {
  margin-right: 0;
}
.circle-btn.checked {
  background: #2176b8;
  color: #fff;
}
.circle-btn.edit {
  background: #eaf4fa;
  color: #2176b8;
}
.circle-btn.delete {
  background: #eaf4fa;
  color: #d32f2f;
}
.circle-btn:hover {
  background: var(--theme-primary);
  color: #fff;
}
.def-input-row {
  display: flex;
  margin-bottom: 12px;
}
.def-input-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.def-input-label {
  color: #222;
  font-size: 15px;
  margin-bottom: 6px;
}
.def-input-textarea {
  width: 92%;
  min-height: 48px;
  border: 1.5px solid #b5d2e8;
  border-radius: 12px;
  font-size: 16px;
  padding: 10px 14px;
  resize: none;
  background: #fff;
  margin-bottom: 0;
}
.def-add-btn {
	margin-top: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.def-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  font-size: 16px;
  table-layout: fixed;
}
.def-table thead {
  display: table;
  width: 100%;
}
.def-table tbody {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2176b8 #e0eaf3;
}
.def-table tbody::-webkit-scrollbar {
  width: 6px;
}
.def-table tbody::-webkit-scrollbar-track {
  background: #e0eaf3;
}
.def-table tbody::-webkit-scrollbar-thumb {
  background-color: #2176b8;
  border-radius: 3px;
}
.def-table th {
  background: #2176b8;
  color: #fff;
  font-weight: 500;
  padding: 10px 0;
	
}
.def-table th, .def-table td {
  text-align: left;
  padding: 10px 12px;
}
.def-table td {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #e0eaf3;
  vertical-align: middle;
}
.def-td-serial {
  text-align: center;
  font-size: 16px;
  color: #2176b8;
  font-weight: 500;
}
.def-td-content {
  width: 500px;
  font-size: 16px;
  color: #222;
  word-break: break-all;
}
.def-td-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.def-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
	background-color: #2176b8;
	color: #fff;
}
.def-circle-btn svg {
  display: block;
}
.def-circle-btn:hover {
  background: #eaf4fa;
}
.edit-input {
  width: 100%;
  padding: 5px;
  border: 1px solid #b5d2e8;
  border-radius: 4px;
  font-size: 14px;
}
</style>
